import 'package:flutter/material.dart';
import 'package:videotop/base_view.dart';
import 'package:videotop/model/report_model.dart';
import 'package:provider/provider.dart';

import '../mycolor.dart';
import '../myinfo.dart';
import '../util.dart';

class Report extends StatefulWidget {
  int uid;

  Report(this.uid);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _Report();
  }
}

class _Report extends State<Report> {


  @override
  Widget build(BuildContext context) {
    return BaseView<ReportModel>(
      model: ReportModel(context,widget.uid,Provider.of<MyInfo>(context),Provider.of<Util>(context)),
      builder: (context,model,child){
        return Scaffold(
          appBar: AppBar(
            elevation: 0,
            leading: IconButton(
              icon: Image.asset(
                'assets/image/back_white.png',
                width: 20,
                height: 20,
                fit: BoxFit.fill,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            centerTitle: true,
            title: Text(
              'Report',
              style: TextStyle(fontSize: 18, color: Colors.grey[700]),
            ),
          ),
          body: Container(
            margin: EdgeInsets.only(left: 20,right: 20,top: 10),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Reason for reporting (Required)',
                    style: TextStyle(fontSize: 20, color: Colors.black),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 5),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Pornographic harassment',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '0',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Bloody violence',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '1',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Provide pornographic services',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '2',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Spam',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '3',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Fraud(wine tray...)',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '4',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Violation of national law',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '5',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Political elements',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '6',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            'Other',
                            style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                          ),
                        ),
                        Radio(
                          value: '7',
                          groupValue: model.groupValue,
                          activeColor: MyColor.yellow,
                          onChanged: (a){
                            model.choose(a);
                          },
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 15),
                    child: Text(
                      'Picture evidence (Optional)',
                      style: TextStyle(fontSize: 20, color: Colors.black),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 20,right: 20),
                    child: GridView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: model.listBean.length <3?model.listBean.length + 1:model.listBean.length,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          //横轴元素个数
                            crossAxisCount: 3,
                            //纵轴间距
                            mainAxisSpacing: 10.0,
                            //横轴间距
                            crossAxisSpacing: 10.0,
                            //子组件宽高长度比例
                            childAspectRatio: 1.0),
                        itemBuilder: (context, index) {
                          if (index == model.listBean.length) {
                            return GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: (){
                                model.addImg();
                              },
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular((10)),
                                  color: Color(0xffF2F4FC),),
                                child: Center(
                                  child: Icon(
                                    Icons.add,
                                    size: 30,
                                    color: Colors.grey,
                                  ),
                                ),
                              ),
                            );
                          } else {
                            return ClipRRect(
                              borderRadius: BorderRadius.circular((10)),
                              child: Stack(
                                children: <Widget>[
                                  Image.file(
                                    model.listBean[index],
                                    height: double.infinity,
                                    width: double.infinity,
                                    fit: BoxFit.fill,
                                  ),
                                  Positioned(
                                    right: 1,
                                    child: GestureDetector(
                                        onTap: (){
                                          model.removeAt(index);
                                        },
                                        child: Container(
                                          padding: EdgeInsets.all(5),
                                          child: Text(
                                            'delete',
                                            style: TextStyle(
                                                color: Colors.grey[300],
                                                fontSize: 14
                                            ),
                                          ),
                                        )
                                    ),
                                  )
                                ],
                              ),
                            );
                          }
                        }),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 20),
                    child: Text(
                      'Supplementary description (Optional)',
                      style: TextStyle(fontSize: 20, color: Colors.black),
                    ),
                  ),
                  TextField(
                    cursorColor: MyColor.yellow,
                    onChanged: (value){
                      model.miaosu = value;
                    },
                    decoration: InputDecoration(
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.grey[700]),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.grey[700]),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: (){
                      model.getReport();
                    },
                    child: Container(
                      margin: EdgeInsets.only(top: 60,bottom: 50),
                      height: 50,
                      color: Colors.black,
                      width: MediaQuery.of(context).size.width,
                      child: Center(
                        child: Text(
                          'Upload',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }

}
